<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../day01/js/jquery-3.7.1.min.js"></script>
</head>
<body>
    <div id="box">
        <div>我是盒子</div>
    </div>
    <button id="btn">btn</button>
    <input type="text" class="input" id="input" name="name-1" >
</body>
<script>
    //html()方法获取或设置被选元素的内容（包标签）。
    console.log($('#box').html());
    console.log($('#box').text());
    $('#btn').bind('click',function(){
        //html()方法设置被选元素的内容（包标签）。interHTML
        $('#box').html('<div>我是盒子1</div>'); 
        //text()方法设置或返回被选元素的文本内容。interText
        $('#box').text('<div>我是盒子2</div>');
        // $('#input').attr('disabled',true);
        $('#input').prop('disabled',true);
    })
    //val()方法设置或返回被选元素的value属性值。
    $('input').val('你好');
    $('input').bind('blur',function(){
    
        console.log($(this).val());
    });
    //attr() prop()方法设置或返回被选元素的属性值。
    //getAttribute() setAttribute()
    console.log($('input').attr('name'));
    console.log($('input').prop('name'));
    //attr获取自定义属性
    console.log( $('input').attr('name-2'));
    //prop无法获取自定义属性
    console.log( $('input').prop('name-2'));
    
    console.log($('input').attr('disabled'));
    console.log($('input').prop('disabled'));//true


</script>
</html>